<template>
    <!--    <el-single-select-->
    <!--      :dataObj="purchaseListList"-->
    <!--      :prop="singleSelectColumn"-->
    <!--      :total="singleSelectInput.singleSelectPageTotal"-->
    <!--      @confirm="confirm"-->
    <!--      :page-sizes="[10, 20, 50, 100, 200, 500]"-->
    <!--      @handleSizeChange="handleSizeChange"-->
    <!--      @handleCurrentChange="handleCurrentChange"-->
    <!--      :dialogVisible.sync="dialogVisible"-->
    <!--      ref="aabb"-->
    <!--      title="合同查询"-->
    <!--    >-->
    <!--      <el-dialog-->
    <!--          :close-on-click-modal="false"-->
    <!--          title="合同查询"-->
    <!--          :visible.sync="dialogVisible"-->
    <!--          v-if="dialogVisible"-->
    <!--          width="1000px"-->
    <!--      >-->
    <!--&lt;!&ndash;          :before-close="handleClose"&ndash;&gt;-->
    <!--    -->
    <!--              <div style="width: 100%; display: flex; justify-content: center">-->
    <!--                  <div class="dialog-input">-->
    <!--                      <span class="label">合同编号：</span>-->
    <!--                      <el-input-->
    <!--                          v-model="singleSelectInput.contractCode"-->
    <!--                          placeholder="请输入合同编号"-->
    <!--                      ></el-input>-->
    <!--                  </div>-->
    <!--    -->
    <!--                  <div class="dialog-input">-->
    <!--                      <span class="label">合同名称：</span>-->
    <!--                      <el-input-->
    <!--                          v-model="singleSelectInput.contractName"-->
    <!--                          placeholder="请输入合同名称"-->
    <!--                      ></el-input>-->
    <!--                  </div>-->
    <!--    -->
    <!--                  <div class="dialog-input">-->
    <!--                      <span class="label">供应商：</span>-->
    <!--                      <el-input-->
    <!--                          v-model="singleSelectInput.partyBName"-->
    <!--                          placeholder="请输入供应商"-->
    <!--                      ></el-input>-->
    <!--                  </div>-->
    <!--              </div>-->
    <!--              <div style="width: 100%; display: flex; justify-content: center">-->
    <!--                  <el-button-->
    <!--                      size="mini"-->
    <!--                      type="primary-font-mini"-->
    <!--                      @click="singleSelectSearch"-->
    <!--                  >搜索-->
    <!--                  </el-button>-->
    <!--            -->
    <!--                  <el-button size="mini" type="default-mini" @click="singleSelectReset"-->
    <!--                  >重置-->
    <!--                  </el-button>-->
    <!--              </div>-->
    <!--      </el-dialog>-->
    <div class="el-single-select">
        
        <el-dialog
            :before-close="handleClose"
            :close-on-click-modal="false"
            title="合同查询"
            :visible.sync="dialogVisible"
            v-if="dialogVisible"
            width="1000px"
        >
            <!--          :before-close="handleClose"-->
            
            <div class="el-dialog-box">
                <div class="dialog-top">
                    <slot name="dialogTop">
                        <div class="dialog-input">
                            <span class="label">合同编号：</span>
                            <el-input
                                v-model="singleSelectInput.contractCode"
                                placeholder="请输入合同编号"
                                style="width: 260px"
                            ></el-input>
                        </div>
                        
                        <div class="dialog-input">
                            <span class="label">合同名称：</span>
                            <el-input
                                v-model="singleSelectInput.contractName"
                                placeholder="请输入合同名称"
                                style="width: 260px"
                            ></el-input>
                        </div>
                        
                        <div class="dialog-input">
                            <span class="label">供应商：</span>
                            <el-input
                                v-model="singleSelectInput.partyBName"
                                placeholder="请输入供应商"
                                style="width: 260px"
                            ></el-input>
                        </div>
                        <div style="width: 100%; display: flex; justify-content: center">
                            <el-button
                                size="mini"
                                type="primary-font-mini"
                                @click="singleSelectSearch"
                            >搜索
                            </el-button>
                            <el-button size="mini" type="default-mini" @click="singleSelectReset"
                            >重置
                            </el-button>
                        </div>
                    </slot>
                </div>
                <div class="dialog-bottom">
                    <el-table
                        :data="purchaseListList"
                        ref="multipleTable"
                        max-height="314"
                        tooltip-effect="dark"
                        v-if="dialogVisible"
                    >
                        <el-table-column label="序号" type="index" width="55">
                        </el-table-column>
                        <el-table-column
                            :key="m"
                            :label="i.label"
                            :prop="i.prop"
                            v-for="(i, m) in singleSelectColumn"
                        >
                        </el-table-column>
                        <el-table-column label="操作" width="155">
                            <template slot-scope="{ row }">
                                <el-button
                                    class="row-btn"
                                    plain
                                    type="single-number"
                                    @click="confirm(row)"
                                >选择
                                </el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="dialog-footer" slot="footer">
                <div id="ccui-paging">
                    <el-pagination
                        :page-sizes="[10, 20, 50, 100, 200, 500]"
                        :total="singleSelectInput.singleSelectPageTotal"
                        :page-size="pageSizeCode"
                        :current-page="pageNoCode"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        next-text="下一页 >"
                        popper-class="ccui-paging-page-size-popper"
                        prev-text="< 上一页"
                    ></el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
    <!--    </el-single-select>-->
</template>

<script>
import { listSmpTransportForScPage} from "@/app/transportation-settlement/transportation-maintenance-approval/api/transportation-approval";

export default {
    name: "contractDialog",
    props: {
        reportInOrgName: {
            type: String
        },
        reportOrgId: {
            type: Number
        }
    },
    watch: {
        reportOrgId: {
            handler(n) {
                if (n) this.getContractList();
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            title: "选择合同",
            // 招标结果关联弹窗相关变量 start
            tableData: [],
            // 高级搜索参数
            singleSelectInput: {
                pageNo: 1, // 分页页码
                pageSize: 20, // 分页每页显示多少数据
                singleSelectPageTotal: 0
            },
            total: 0,
            // 乙方表格数据
            purchaseListList: [],
            // 乙方弹窗表头
            singleSelectColumn: [
                {prop: "contractCode", label: "合同编号"},
                {prop: "contractName", label: "合同名称"},
                {prop: "partyAName", label: "签订单位"},
                {prop: "partyBName", label: "供应商"},
                {prop: "reportInOrgName", label: "填报单位"},
                {prop: "enabledDate", label: "生效日期"}
            ],
            pageNoCode: 1,
            pageSizeCode: 10,
        };
    },
    methods: {
        confirm(row) {
            this.$emit("numrow", row);
            this.dialogVisible = false;
        },
        // 打开谈弹框校验调用接口获取数据
        showContractList() {
            if (this.reportInOrgName == "") {
                this.$message({
                    message: "请先选择填报单位！",
                    type: "warning",
                    showClose: true,
                    ccuiCustom: true
                });
            } else {
                this.dialogVisible = true;
                this.pageNoCode = 1;
                this.pageSizeCode = 10;
                this.getContractList();
            }
        },
        // 调用接口
        getContractList() {
            listSmpTransportForScPage({
                ...this.singleSelectInput,
                reportOrgId: this.reportOrgId,
                pageNo : this.pageNoCode,
                pageSize : this.pageSizeCode
            }).then(res => {
                console.log(res);
                this.purchaseListList = res.data.data.rows;
                this.purchaseListList.forEach(item=>{
                    if(item.enabledDate){
                        item.enabledDate = item.enabledDate.substring(0,10)
                    }
                })
                // this.singleSelectInput.pageNo = res.data.data.pageNo;
                this.pageNoCode = res.data.data.pageNo;
                this.singleSelectInput.singleSelectPageTotal =
                    res.data.data.recordsTotal;
            });
        },
        // 搜索
        singleSelectSearch() {
            this.getContractList();
        },
        // 重置
        singleSelectReset() {
            this.singleSelectInput = {
                pageNo: 1, // 分页页码
                pageSize: 20, // 分页每页显示多少数据
                singleSelectPageTotal: 0
            };
            this.getContractList();
        },
        // 分页操作
        handleSizeChange(val) {
            this.pageSizeCode = val;
            this.getContractList();
        },
        handleCurrentChange(val) {
            console.log(val);
            this.pageNoCode = val;
            this.getContractList();
        },
        handleClose() {
            // this.singleSelectReset();
            this.dialogVisible = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.chooseSettle {
    display: inline-block;
}

/deep/ .el-single-select .el-dialog__wrapper .el-dialog .el-dialog__body {
    .el-dialog-box .dialog-top {
        justify-content: space-between;
    }
}

.row-btn {
    width: auto !important;
    padding: 0 20px !important;
    margin-left: 0 !important;
}

/deep/ .label {
    display: inline-block;
    width: 130px !important;
    text-align: right;
}

/deep/ .el-dialog__footer {
    border-top: none;
}
</style>
